import { Link, Stack } from 'expo-router';
<% if (props.stylingPackage?.name === "nativewind") {%>
  import { Text } from 'react-native';

  import { Container } from '~/components/Container';
<% } else if (props.stylingPackage?.name === "unistyles") { %>
  import { StyleSheet } from 'react-native-unistyles'
  import { Text } from 'react-native';

  import { Container } from '~/components/Container';
<% } else if (props.stylingPackage?.name === "stylesheet") { %>
  import { StyleSheet, Text } from 'react-native';

  import { Container } from '~/components/Container';
<% } %>

export default function NotFoundScreen() {

  return (
    <% if (props.stylingPackage?.name === "nativewind") {%>
      <>
        <Stack.Screen options={{ title: "Oops!" }} />
        <Container>
          <Text className={styles.title}>{"This screen doesn't exist."}</Text>
          <Link href="/" className={styles.link}>
            <Text className={styles.linkText}>Go to home screen!</Text>
          </Link>
        </Container>
      </>
    <% } else { %>
      <>
        <Stack.Screen options={{ title: "Oops!" }} />
        <Container>
          <Text style={styles.title}>{"This screen doesn't exist."}</Text>
          <Link href="/" style={styles.link}>
            <Text style={styles.linkText}>Go to home screen!</Text>
          </Link>
        </Container>
      </>
    <% } %>
  );
}

<% if (props.stylingPackage?.name === "nativewind") { %>
  const styles = {
    title: `text-xl font-bold`,
    link: `mt-4 pt-4`,
    linkText: `text-base text-[#2e78b7]`,
	};
<% } else if (props.stylingPackage?.name === "unistyles") { %>
  const styles = StyleSheet.create((theme) => ({
    title: {
      fontSize: 20,
      fontWeight: 'bold',
      color: theme.colors.typography,
    },
    link: {
      marginTop: 16,
      paddingVertical: 16,
    },
    linkText: {
      fontSize: 14,
      color: theme.colors.astral,
    },
  }));
<% } else if (props.stylingPackage?.name === "stylesheet") { %>
  const styles = StyleSheet.create({
    title: {
      fontSize: 20,
      fontWeight: 'bold',
    },
    link: {
      marginTop: 16,
      paddingVertical: 16,
    },
    linkText: {
      fontSize: 14,
      color: '#2e78b7',
    },
  });
<% } %>
